<template>
 <div class="app-container">
   <p @click="Ondialog">{{mainmsg}}</p>
   <el-dialog
     :visible.sync="visible"
     title="提示"
     :content = "msg"
     :leftBtn="left"
     :rightBtn="right"></el-dialog>
 </div>
</template>

<script>
/* eslint-disable no-console */

export default {
  name: 'App',
  data() {
    return {
      mainmsg: '点击打开Dialog',
      visible: false,
      msg: '需要注意的是内容是默认不居中的',
      left: '取消',
      right: '确定',
    };
  },
  methods: {
    Ondialog() {
      this.visible = true;
      // this.$emit('update:visible', true);
    },
  },
};
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}
.app-container{
  width: 100%;
  height: 100%;
  p{
    padding: 30px;
    color: #409eff;
    box-sizing: border-box;
    &:hover{
      color: #66b1ff;
      cursor: pointer;
    }
  }
}
</style>
